<template>
	<view style="flex:1;max-height: 100%;">
		<view class="box" :style="{backgroundColor:activeColor}">
		</view>
		<!-- 大图 -->
		<view class="cXY" :style="{background:'linear-gradient(to bottom,'+activeColor+',#ffffff)' }"
			style="height: 350rpx;position: relative;z-index: 10;">
			<image :src="pic" mode="scaleToFill" style="height: 300rpx;width: 680rpx;position: absolute;z-index: 999;"
				class="rd10">
			</image>
		</view>
		<!--tab -->
		<view class="tabListBox" :class="{ 'tui-sticky-fixed': isFixed}">
			<view class="navwrap ml20">
				<scroll-view :scroll-into-view="'tab'+ hotTabCurrent" scroll-with-animation scroll-x="true"
					class="scrollNav">
					<view :class="hotTabCurrent === index ? 'act_scrollnav' : ''"
						@click="changeHotTab(index,item.id,item.color,item.bannerIcon)"
						v-for="(item, index) in hotRentTabList" :key='index' :id="'tab'+index" class="scroll-view-item">
						{{ item.name }}
					</view>
				</scroll-view>
			</view>
		</view>

		<!--tab对应的产品 -->
		<view class="productList mt10 ptb20">
			<view class="bcX" v-for="(item, index) in productZoneProductList" :key="index" @click="skpGoodPage(item)">
				<view class="p10 left-img">
					<image :src="item.image" mode="scaleToFill" :lazy-load="true" style="width: 190rpx;height: 200rpx;">
					</image>
				</view>

				<view class="fx1 "
					style="display: flex;flex-direction: column;justify-content: space-between;height: 200rpx;">
					<view class="pro-tit">
						{{item.name}}
					</view>

					<view style="display: flex;">
						<view class="left-tit mr20 "><text>信用免押</text></view>
						<view class="right-tit"><text>正品保障</text></view>
					</view>
					<view class="pro-price mt10">
						<text class="m">¥</text>
						<text class="l" style="font-weight: 800;">
							{{ getPartMoney(item.price && item.price.toString(), true) }}
						</text>
						<text class="d">.</text>
						<text class="r">
							{{ getPartMoney(item.price && item.price.toString(), false) }}
						</text>
						<text class="r">/天</text>
						<text class="tips ml10">非监管机 顺丰快递</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import classIfiedService from "../classified/services.js"
	import {
		indexComplexInfo,
		listLiteAll
	} from '../../api/index.js'
	export default {
		data() {
			return {
				activeColor: '', //tab对应的颜色
				isFixed: false,
				total: 1, //标签商品共有多少条
				pageNum: 1, //页数
				pageSize: 10, //一页多少条
				pic: '', //大图
				hotTabCurrent: 0,
				categoryId: '', //产品的id
				tabId: '',
				productZoneProductList: [],
				hotRentTabList: []
			}
		},
		onLoad(e) {
			console.log(e.cateoryId, "e.categoryId")
			if (e) {
				this.tabId = e.cateoryId
			}
			this.listLiteAll()
			uni.setNavigationBarColor({
				backgroundColor: '#240B5F',
			})
		},
		onReachBottom() {
			this.onScrollToLower()
		},
		methods: {
			//监听页面滚动
			onPageScroll(e) {
				// console.log(e,"e")
				if (e.scrollTop > 160) {
					this.isFixed = true
				} else {
					this.isFixed = false
				}
			},
			/**
			 * 获取金额的小数点前、后的数据
			 * @param {Boolean} isFront : 是否是前半部分
			 */
			getPartMoney(prices, isFront) {
				const price = prices || ""
				if (!price) return EMPTY_PLACEHOLDER
				const list = price.split(".")
				const result = isFront ? list[0] : list[1]
				return result || 0
			},
			// 点击切换tab
			changeHotTab(index, _id, color, bgc) {
				this.categoryId = _id
				// console.log(this.categoryId,"this.categoryId")
				this.hotTabCurrent = index;
				this.pic = bgc
				console.log(color, "color")
				if (color) {
					this.activeColor = color
					uni.setNavigationBarColor({
						backgroundColor: color,
					})
				}
				// this.productZone()
				//修改标签下标
				// this.tabId = this.tabList[index].id
				//当标签改变需要让商品页数和总条数重置
				this.pageNum = 0
				this.total = 1
				this.onScrollToLower("Tab")
			},
			// 所有分类的数据
			listLiteAll() {
				listLiteAll({
					method: 'GET',
					data: {
						// pageNum: 1,
						// pageSize: 10,
					}
				}).then(res => {
					if (res.statusCode === 200) {
						// console.log(res.data.data, "res")
						if (this.tabId != '') {
							let arrList = res.data.data
							let num = arrList.findIndex((val, index) => {
								return val.id == this.tabId
							})
							// console.log(num, "num")
							this.hotTabCurrent = num
							this.pic = res.data.data[num].bannerIcon
							this.activeColor = res.data.data[num].color
							// console.log(res.data.data[num].color,"res.data.data[num].color")
							if (res.data.data[num].color) {
								uni.setNavigationBarColor({
									backgroundColor: res.data.data[num].color,
								})
							}
							classIfiedService
								.listLiteCategoryProduct({
									pageNum: this.pageNum,
									pageSize: this.pageSize,
									categoryId: this.tabId,
								})
								.then((res) => {
									this.productZoneProductList = this.productZoneProductList.concat(res.data
										.records || [])
									this.total = res.data.total
								})
						}
						if (this.hotTabCurrent === 0) {
							this.pic = res.data.data[0].bannerIcon
							this.categoryId = res.data.data[0].id
							classIfiedService
								.listLiteCategoryProduct({
									pageNum: this.pageNum,
									pageSize: this.pageSize,
									categoryId: this.categoryId,
								})
								.then((res) => {
									this.productZoneProductList = this.productZoneProductList.concat(res.data
										.records || [])
									this.total = res.data.total
								})
						}
						this.hotRentTabList = res.data.data
					}
				})
			},
			onScrollToLower(e) {
				// console.log(e, "e")
				//判断是否需要请求商品
				// if (this.pageNum * this.pageSize - this.total >= 10) {
				// 	uni.showToast({
				// 		title: "没有更多啦～",
				// 	})
				// 	return
				// }
				//翻页功能每次下拉需要页数加一
				this.pageNum = this.pageNum + 1
				classIfiedService
					.listLiteCategoryProduct({
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						categoryId: this.categoryId,
					})
					.then((res) => {
						if (e === "Tab") {
							//如果是tab切换让rightList重置
							this.productZoneProductList = res.data.records
						} else {
							//如果不是让rightList合并
							this.productZoneProductList = this.productZoneProductList.concat(res.data.records || [])
						}
						this.total = res.data.total
					})
			},
			//跳转商品页
			skpGoodPage(item) {
				console.log(item, "item")
				this.$onTo(
					`/pages/product/product?productId=${
								item.itemId}`
				)
			},
		}
	}
</script>

<style>
	page {
		height: 100vh;
		width: 750rpx;
		background-color: #F1F1F1;
	}

	.tui-sticky-fixed {
		width: 100%;
		background-color: #FFFFFF;
		position: fixed; //置顶
		top: 0;
		z-index: 99;
	}

	.box {
		height: 15rpx;
		width: 100%;
	}

	/* 去除tab的横向滚动条 */
	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	.tabListBox {
		background-color: #FFFFFF;
	}

	.navwrap {

		width: 700rpx;
	}

	.scrollNav {
		white-space: nowrap;
	}

	.scroll-view-item {
		width: auto;
		display: inline-block;
		font-size: 27rpx;
		margin-right: 40rpx;
		padding: 20rpx 2rpx;
		position: relative;
		color: #A3A3A3;
	}

	.act_scrollnav {
		color: #2FCCC3;
		font-weight: bold;
	}

	.act_scrollnav::after {
		content: '';
		display: block;
		width: 80%;
		height: 5rpx;
		background-color: #2FCCC3;
		border-radius: 2rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 4rpx;
	}

	.pro-tit {
		color: #313131;
		font-size: 28rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.pro-price {
		font-size: 35rpx;
		color: #E72B02;
	}

	.tips {

		font-size: 20rpx;
		color: #A1A1A1;
	}

	.productList {
		background-color: #FFFFFF;
	}

	.left-img {
		box-shadow: 0rpx 3rpx 0rpx 0rpx #F7F7F7;
	}

	.left-tit {
		width: 100rpx;
		height: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/* line-height: 32rpx;
		text-align: center; */
		font-size: 20rpx;
		border: 3rpx solid #C74F47;
		color: #C74F47;
		border-top-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
	}

	.right-tit {
		width: 100rpx;
		height: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/* line-height: 36rpx;
		text-align: center; */
		font-size: 20rpx;
		border: 3rpx solid #5180E1;
		color: #5180E1;
		border-top-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;

	}

	.m {
		font-size: 20rpx;
		margin-right: 6rpx;
	}

	.l {
		font-size: 38rpx;
		font-weight: 500;
	}

	.d {
		font-size: 36rpx;
	}

	.r {
		font-size: 20rpx;
		font-weight: 500;
	}

	.home-bottom {
		text-align: center;
		margin: 20rpx 0;
	}
</style>
